<template>
	<view v-if="visible">
		<uni-popup ref="popup" :mask-click="false">
			<view class="content">
				<view style="text-align: end;padding: 20rpx;"><text @click="close">关闭</text></view>
				<view style="overflow-y: auto;height: 58vh;">
					<uni-section title="审批意见" type="line" padding>
						<uni-easyinput type="textarea" v-model="formData.message" placeholder="请输入审批意见"></uni-easyinput>
					</uni-section>
					<uni-section title="附件" type="line" padding>
						<uni-file-picker fileMediatype="all" :list-styles="listStyles" ref="files" :auto-upload="false"
							@select="select" />
					</uni-section>
					<uni-section title="下一步审批人" type="line" padding v-if="nextNodes && nextNodes.length > 0">
						<uni-forms>
							<uni-forms-item label-width="80px" :label="item.nodeName" :key="index" required
								v-for="(item,index) in nextNodes">
								<uni-easyinput disabled suffixIcon="search" v-model="nickName[item.nodeId]"
									placeholder="请选择审批人"
									@iconClick="choosePeople(item.chooseWay, item.assigneeId, item.nodeId)">
								</uni-easyinput>
							</uni-forms-item>
						</uni-forms>
					</uni-section>
					<uni-section title="抄送" type="line" padding v-if="setting.isCopy">
						<uni-forms>
							<uni-forms-item label-width="80px" label="是否抄送" required>
								<uni-data-checkbox mode="button" v-model="formData.isCopy" :localdata="copys" />
							</uni-forms-item>
							<uni-forms-item label-width="80px" label="抄送人" v-if="formData.isCopy ==='true'">
								<uni-easyinput disabled suffixIcon="search" v-model="formData.assigneeNames"
									placeholder="请选择抄送人" @iconClick="copyOpen()"></uni-easyinput>
							</uni-forms-item>
						</uni-forms>
					</uni-section>

				</view>
				<view class="btn-contant">
					<view>
						<button @click="submitFormConfirm" type="primary">提交</button>
					</view>
					<view v-if="backNodeList && backNodeList.length>0 && setting.showBack">
						<button @click="openBack" v-if="backNodeList && backNodeList.length>0 && setting.showBack"
							size="mini" type="primary">退回</button>
					</view>
					<view v-if="list && list.length > 0">
						<mosoweDropdown :list="list" @onClick="onClick">
							更多
						</mosoweDropdown>
					</view>
				</view>
			</view>

		</uni-popup>
		<!-- 转办 -->
		<uni-popup ref="transmitRef" :mask-click="false">
			<view class="content">
				<view style="text-align: end;padding: 20rpx;"><text @click="transmitClose">关闭</text></view>
				<uni-section title="转办人" type="line" padding>
					<uni-easyinput disabled suffixIcon="search" @iconClick="transmitOpen"
						v-model="transmitForm.userName" placeholder="请选择转办人"></uni-easyinput>
				</uni-section>
				<view class="btn-single">
					<view>
						<button @click="transmitSubmit" size="mini" type="primary">确认</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 委托 -->
		<uni-popup ref="delegateRef" :mask-click="false">
			<view class="content">
				<view style="text-align: end;padding: 20rpx;"><text @click="delegateClose">关闭</text></view>
				<uni-section title="委托人" type="line" padding>
					<uni-easyinput disabled suffixIcon="search" @iconClick="delegateOpen"
						v-model="delegateForm.delegateUserName" placeholder="请选择委托人"></uni-easyinput>
				</uni-section>
				<view class="btn-single">
					<view>
						<button @click="delegateSubmit" size="mini" type="primary">确认</button>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 加签 -->
		<uni-popup ref="addMultiRef" :mask-click="false">
			<view class="content">
				<view style="text-align: end;padding: 20rpx;"><text @click="addMultiClose">关闭</text></view>
				<uni-section title="加签人" type="line" padding>
					<uni-easyinput disabled suffixIcon="search" @iconClick="addMultiOpen"
						v-model="addMultiForm.nickNames" placeholder="请选择人员"></uni-easyinput>
				</uni-section>
				<view class="btn-single">
					<view>
						<button @click="addMultiSubmit" size="mini" type="primary">确认</button>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 减签-->
		<uni-popup ref="deleteMultiRef" :mask-click="false">
			<view class="content">
				<view style="text-align: end;padding: 20rpx;"><text @click="deleteMultiClose">关闭</text></view>
				<uni-table ref="table" type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
					<uni-tr>
						<uni-th width="150" align="center">环节名称</uni-th>
						<uni-th width="150" align="center">姓名</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in multiList" :key="index">
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">{{ item.assignee }}</uni-td>
					</uni-tr>
				</uni-table>
				<view class="btn-single">
					<view>
						<button @click="deleteMultiSubmit" size="mini" type="primary">确认</button>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 选人开始 -->
		<workflow-user :dataObj="dataObj" :nodeId="nodeId" @confirmUser="clickWorkflowUser" ref="wfUserRef" />
		<!-- 选人结束 -->

		<!-- 选人开始 -->
		<user @confirmUser="clickUser" :multiple="multiple" ref="userRef" />
		<!-- 选人结束 -->

		<!-- 选人开始 -->
		<multiUser @confirmUser="addMultiUser" :taskId="taskId" ref="multiUserRef" />
		<!-- 选人结束 -->

		<!-- 驳回开始 -->
		<back ref="backRef" :taskId="taskId" @callBack="callBack()" :backNodeList="backNodeList"
			:sendMessage="sendMessage" />
		<!-- 驳回结束 -->

		<!-- 终止提示窗-->
		<uni-popup ref="terminationRef" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="提示" content="是否确认终止流程？"
				@confirm="terminationClick"></uni-popup-dialog>
		</uni-popup>

		<!-- 提交提示窗-->
		<uni-popup ref="submitRef" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="提示" content="是否确认提交流程？"
				@confirm="submitForm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		toast
	} from '@/utils/common'
	import taskApi from "@/api/workflow/task.js";
	import workflowUser from '@/components/process/workflow-user/workflow-user.vue'
	import multiUser from '@/components/process/multi-user/multi-user.vue'
	import user from '@/components/process/user/user.vue'
	import back from '@/components/process/back/back.vue'
	import mosoweDropdown from '@/components/mosowe-dropdown/mosowe-dropdown.vue'
	export default {
		components: {
			workflowUser,
			back,
			mosoweDropdown,
			user,
			multiUser
		},
		props: {
			taskId: String,
			taskVariables: Object,
			sendMessage: Object
		},
		data() {
			return {
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						radius: 2
					}
				},
				//是否多选
				multiple: false,
				visible: false,
				//下一节点
				nextNodes: [],
				//是否为会签
				isMultiInstance: false,
				//可以减签的集合
				multiList: [],
				//可驳回的集合
				backNodeList: [],
				//按钮设置
				setting: {},
				//流程状态
				businessStatus: {},
				//流程实例id
				processInstanceId: '',
				//附件
				attachmentList: [],
				//true 为申请人选择全部人员  false为审批节点选人
				defaultProcess: false,
				//全部节点 
				processNodeList: [],
				//流程定义key
				processDefinitionKey: '',
				//审批人名称
				nickName: {},
				//提交表单数据
				formData: {
					message: null,
					assigneeMap: {},
					//是否抄送
					isCopy: 'false',
					//抄送人id
					assigneeIds: undefined,
					//抄送人名称
					assigneeNames: undefined,
					//消息提醒
					sendMessage: {},
					//true 为申请人选择全部人员  false为审批节点选人
					defaultProcess: false,
					//全部节点
					processNodeList: [],
				},
				//查询审批人条件
				dataObj: {},
				//节点id
				nodeId: '',
				//消息提醒类型1.站内信,2.邮箱,3.短信
				sendMessageType: [1],
				//按钮
				list: [],
				//转办
				transmitForm: {
					message: null,
					userId: null,
					userName: null,
					taskId: null,
					sendMessage: {}
				},
				//委托
				delegateForm: {
					delegateUserId: null,
					delegateUserName: null,
					taskId: null,
					sendMessage: {}
				},
				moreDialog: '',
				//加签
				addMultiForm: {},
				//减签
				deleteMultiForm: {},
				//减签数据
				deleteeMultiUserList: [],
				//是否抄送
				copys: [{
					text: '是',
					value: 'true'
				}, {
					text: '否',
					value: 'false'
				}]
			}
		},
		methods: {
			//附件
			select(e) {
				e.tempFiles.forEach(f => {
					this.attachmentList.push(f)
				})
			},
			//附件上传
			submitUpload() {
				if (this.attachmentList.length > 0) {
					taskApi.deleteAttachmentByTaskId(this.taskId)
					this.attachmentList.forEach((file) => {
						taskApi.attachmentUpload(file.path, this.taskId, this.processInstanceId,false)
					})
				}
			},
			open() {
				this.visible = true
				this.$nextTick(function() {
					this.$refs.popup.open('bottom')
				})

				// 获取下一节点信息
				let params = {
					taskId: this.taskId,
					variables: this.taskVariables
				}
				taskApi.getNextNodeInfo(params).then(res => {
					this.nextNodes = res.data.list;
					this.isMultiInstance = res.data.isMultiInstance;
					this.multiList = res.data.multiList;
					this.backNodeList = res.data.backNodeList;
					this.setting = res.data.setting
					this.businessStatus = res.data.businessStatus
					this.processInstanceId = res.data.processInstanceId
					this.attachmentList = []
					this.defaultProcess = res.data.defaultProcess
					this.processNodeList = res.data.processNodeList
					this.processDefinitionKey = res.data.processDefinitionKey
					this.list = []
					if (this.businessStatus.status === 'waiting') {
						this.list.push({
							text: '终止',
							value: 'terminationDialog'
						})
					}
					if (this.setting.isTransmit) {
						this.list.push({
							text: '转办',
							value: 'transmitDialog'
						})
					}
					if (this.setting.isDelegate) {
						this.list.push({
							text: '委托',
							value: 'delegateDialog'
						})
					}
					if (this.isMultiInstance && this.setting.addMultiInstance) {
						this.list.push({
							text: '加签',
							value: 'addMultiDialog'
						})
					}
					if (this.multiList && this.multiList.length > 0 && this.setting.deleteMultiInstance) {
						this.list.push({
							text: '减签',
							value: 'deleteMultiDialog'
						})
					}
				});
			},
			close() {
				this.$refs.popup.close('bottom')
			},
			// 选择人员
			choosePeople(chooseWay, assigneeId, nodeId) {
				this.propUserList = [];
				if (chooseWay) {
					if (this.formData.assigneeMap[nodeId]) {
						this.dataObj = {
							chooseWay: chooseWay,
							assigneeId: assigneeId,
							ids: this.formData.assigneeMap[nodeId].split(",")
						};
					} else {
						this.dataObj = {
							chooseWay: chooseWay,
							assigneeId: assigneeId,
							ids: []
						};
					}
					this.nodeId = nodeId;
					this.$refs.wfUserRef.open();
				}
			},
			//工作流选人
			clickWorkflowUser(userList, nodeId) {
				let assignee = userList.map((item) => {
					return item.userId;
				});
				let nickName = userList.map((item) => {
					return item.nickName;
				});
				let arrAssignee = assignee.join(",");
				let arrNickName = nickName.join(",");

				this.formData.assigneeMap[nodeId] = arrAssignee;
				this.nickName[nodeId] = arrNickName
				this.$forceUpdate();
			},
			//工作流选人
			clickUser(userList) {
				//转办
				if (this.moreDialog === 'transmitDialog') {
					this.transmitForm.userId = userList[0].userId
					this.transmitForm.userName = userList[0].nickName
					//委托
				} else if (this.moreDialog === 'delegateDialog') {
					this.delegateForm.delegateUserId = userList[0].userId
					this.delegateForm.delegateUserName = userList[0].nickName
					//抄送
				} else if (this.moreDialog === 'copyDialog') {
					let assignee = userList.map((item) => {
						return item.userId;
					});
					let nickName = userList.map((item) => {
						return item.nickName;
					});
					this.formData.assigneeIds = assignee.join(",")
					this.formData.assigneeNames = nickName.join(",")
				}
				this.$forceUpdate();
			},
			//加签选人
			addMultiUser(userList) {
				let assignees = userList.map((item) => {
					return item.userId;
				});
				let assigneeNames = userList.map((item) => {
					return item.nickName;
				});
				this.addMultiForm = {
					taskId: this.taskId,
					assignees: assignees,
					assigneeNames: assigneeNames,
					nickNames: assigneeNames.join(",")
				}
				this.$forceUpdate();
			},
			//确认提交弹出
			submitFormConfirm() {
				this.$refs.submitRef.open('center');
			},
			// 提交表单数据
			submitForm() {
				this.formData.variables = this.taskVariables
				this.formData.taskId = this.taskId
				//消息提醒
				this.formData.sendMessage = {
					title: this.sendMessage.title,
					type: this.sendMessageType,
					messageContent: this.$store.state.user.name + "提交了" + this.sendMessage.messageContent
				}
				if (this.businessStatus.status === 'draft') {
					this.formData.message = '提交单据'
				}
				this.formData.defaultProcess = this.defaultProcess
				this.formData.processNodeList = this.processNodeList
				// 上传附件
				this.submitUpload()
				taskApi.completeTask(this.formData).then(response => {
					if (response.code === 200) {
						toast("办理成功")
						// 回调事件
						let _this = this
						setTimeout(function() {
							_this.$emit("submitCallback", _this.processDefinitionKey)
						}, 500);
						this.close()
					}
				})
			},
			//打开提交
			openBack() {
				this.$refs.backRef.open()
			},
			//退回
			callBack() {
				this.close()
				// 回调事件
				this.$emit("submitCallback", this.processDefinitionKey)
			},
			//终止
			terminationClick() {
				let params = {
					taskId: this.taskId,
					comment: this.formData.message
				}
				taskApi.terminationTask(params).then(response => {
					toast("办理成功")
					let _this = this
					setTimeout(function() {
						_this.$emit("submitCallback", _this.processDefinitionKey)
					}, 500);
				})
			},
			//更多
			onClick(item) {
				this.moreDialog = item.value
				if (item.value === 'terminationDialog') {
					this.$refs.terminationRef.open('center');
				} else if (item.value === 'transmitDialog') {
					this.$refs.transmitRef.open('bottom');
				} else if (item.value === 'delegateDialog') {
					this.$refs.delegateRef.open('bottom');
				} else if (item.value === 'addMultiDialog') {
					this.$refs.addMultiRef.open('bottom');
				} else if (item.value === 'deleteMultiDialog') {
					this.$refs.deleteMultiRef.open('bottom');
				}

			},
			//打开抄送
			copyOpen() {
				this.moreDialog = 'copyDialog'
				this.multiple = true
				this.$refs.userRef.open();
			},
			//打开转办
			transmitOpen() {
				this.multiple = false
				this.$refs.userRef.open();
			},
			//关闭转办
			transmitClose() {
				this.$refs.transmitRef.close();
			},
			//打开委托
			delegateOpen() {
				this.multiple = false
				this.$refs.userRef.open();
			},
			//关闭委托
			delegateClose() {
				this.$refs.delegateRef.close();
			},
			//打开减签
			deleteMultiOpen() {
				this.$refs.deleteMultiRef.open();
			},
			//关闭减签
			deleteMultiClose() {
				this.deleteMultiForm = {}
				this.$refs.deleteMultiRef.close();
			},
			//打开加签选人
			addMultiOpen() {
				this.$refs.multiUserRef.open();
			},
			//关闭加签
			addMultiClose() {
				this.addMultiForm = {}
				this.$refs.addMultiRef.close();
			},
			//提交转发
			transmitSubmit() {
				this.transmitForm = {
					transmitUserId: this.transmitForm.userId,
					taskId: this.taskId,
					comment: this.transmitForm.message
				}
				//消息提醒
				this.transmitForm.sendMessage = {
					title: this.sendMessage.title,
					type: this.sendMessageType,
					messageContent: this.$store.state.user.name + "转发了" + this.sendMessage.messageContent
				}
				taskApi.transmitTask(this.transmitForm).then(response => {
					if (response.code === 200) {
						// 刷新数据
						toast("办理成功");
						// 将表单清空
						this.transmitForm = {}
						// 回调事件
						let _this = this
						setTimeout(function() {
							_this.$emit("submitCallback", _this.processDefinitionKey)
						}, 500);
					}
					this.loading = false;
				})
			},
			//提交委托申请
			delegateSubmit() {
				this.delegateForm.taskId = this.taskId
				//消息提醒
				this.delegateForm.sendMessage = {
					title: this.sendMessage.title,
					type: this.sendMessageType,
					messageContent: this.$store.state.user.name + "委托了" + this.sendMessage.messageContent
				}
				taskApi.delegateTask(this.delegateForm).then(response => {
					if (response.code === 200) {
						// 刷新数据
						toast("办理成功");
						// 将表单清空
						this.delegateForm = {};
						// 回调事件
						let _this = this
						setTimeout(function() {
							_this.$emit("submitCallback", _this.processDefinitionKey)
						}, 500);
					}
				})
			},
			//加签
			addMultiSubmit() {
				taskApi.addMultiInstanceExecution(this.addMultiForm).then(response => {
					if (response.code === 200) {
						// 刷新数据
						toast("办理成功");
						// 将表单清空
						this.addMultiForm = {}
						// 回调事件
						let _this = this
						setTimeout(function() {
							_this.$emit("submitCallback", _this.processDefinitionKey)
						}, 500);
					}
				})
			},
			//减签
			deleteMultiSubmit() {
				if (this.deleteeMultiUserList && this.deleteeMultiUserList.length > 0) {

					let executionIds = this.deleteeMultiUserList.map((item) => {
						return item.executionId;
					});
					let taskIds = this.deleteeMultiUserList.map((item) => {
						return item.id;
					});
					let assigneeIds = this.deleteeMultiUserList.map((item) => {
						return item.assigneeId;
					});
					let assigneeNames = this.deleteeMultiUserList.map((item) => {
						return item.assignee;
					});
					this.deleteMultiForm = {
						taskId: this.taskId,
						taskIds: taskIds,
						executionIds: executionIds,
						assigneeIds: assigneeIds,
						assigneeNames: assigneeNames
					}
				} else {
					toast("请选择人员")
					return false
				}
				taskApi.deleteMultiInstanceExecution(this.deleteMultiForm).then(response => {
					if (response.code === 200) {
						toast("办理成功");
						// 回调事件
						let _this = this
						setTimeout(function() {
							_this.$emit("submitCallback", _this.processDefinitionKey)
						}, 500);
					}
				})
			},
			// 减签多选
			selectionChange(e) {
				var indexArr = e.detail.index
				var arrlist = []
				// 把选中的当前行数据遍历放在数组中
				indexArr.forEach(item => {
					arrlist.push(this.multiList[item])
				})
				var users = []
				arrlist.forEach((item) => {
					users.push(item)
				})
				this.deleteeMultiUserList = users
			}
		}
	}
</script>

<style scoped>
	.popup {
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		background-color: #fff;
	}

	.content {
		height: 70vh;
		background-color: #fff;
	}

	.btn-contant {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
		padding: 10rpx;
		z-index: 100;
	}

	.btn-single {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: flex-end;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
		padding: 10rpx;
		z-index: 100;
	}

	uni-button {
		width: 180rpx;
		height: 65rpx;
		line-height: 65rpx;
		font-size: 28rpx;
	}
</style>